<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资源管理</el-breadcrumb-item>
      <el-breadcrumb-item>班级管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <div class="list">
        <el-row :gutter="20">
          <el-col :span="1">
            <el-tooltip content="添加" placement="bottom" effect="dark">
              <el-button
                size="min"
                icon="el-icon-circle-plus"
                type="primary"
                circle
                @click="openAddDialog"
              ></el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="4">
            <div>
              <el-input
                @keyup.enter.native="searchClassByName"
                clearable
                placeholder="教室名 / 辅导员"
                v-model="key"
              ></el-input>
            </div>
          </el-col>

          <el-col :span="6">
            <el-tooltip content="搜索" placement="top" effect="dark">
              <el-button
                clearable
                type="warning"
                icon="el-icon-search"
                circle
                @click="searchClassByName"
              ></el-button>
            </el-tooltip>
          </el-col>

          <el-col :span="13">
            <el-tooltip content="点击刷新" placement="top" effect="dark">
              <el-button
                @click="refreshTable"
                class="refresh"
                type="success"
                icon="el-icon-refresh"
                circle
              ></el-button>
            </el-tooltip>
          </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table highlight-current-row :data="classesList" stripe border header-align="center">
          >
          <el-table-column
            fixed="left"
            align="center"
            prop="classId"
            sortable
            width="250px"
            label="班级编号"
          >
            <template slot-scope="scope">
              <el-tag type="warning" effect="dark">{{scope.row.classId}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="className" sortable width="220px" label="班级名称">
            <template slot-scope="scope">
              <el-tag effect="dark">{{scope.row.className}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="instructorName" sortable width="160px" label="辅导员">
            <template slot-scope="scope">
              <el-tag effect="dark" type="info">{{scope.row.instructorName}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="updateTime" sortable label="上次更新时间" width="260px">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="230">
            <template slot-scope="scope">
              <el-button
                class="edit"
                size="mini"
                type="success"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-popconfirm
                @confirm="confirmDelete( scope.row)"
                confirm-button-text="确认"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除吗"
              >
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 40, 80]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!-- 教室新增 -->
        <div class="dialog-form">
          <el-dialog
            modal
            top="120px"
            width="32%"
            @close="closeDialog"
            title="教室添加"
            :visible="addDialogVisible"
            :before-close="handleClose"
          >
            <el-form
              label-position="left"
              :rules="rules"
              ref="addClassroomRef"
              :model="classForm"
              label-width="100px"
            >
              <el-form-item prop="className" label="班级名：">
                <el-input
                  placeholder="请输入班级名"
                  clearable
                  v-model="classForm.className"
                  class="form-input"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item prop="instructorName" label="导师名：">
                <el-input
                  placeholder="请输入导师名"
                  clearable
                  v-model="classForm.instructorName"
                  class="form-input"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                size="medium"
                type="primary"
                @click="addNewClassroom('addClassroomRef')"
              >确 定</el-button>
              <el-button size="medium" @click="addDialogVisible = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>

        <!-- 教室修改 -->
        <div class="dialog-form">
          <el-dialog
            modal
            top="120px"
            width="32%"
            @close="closeDialog"
            title="教室修改"
            :visible="modifiedClassroomDialog"
            :before-close="handleClose"
          >
            <el-form
              label-position="right"
              :rules="rules"
              ref="modifyClassroomRef"
              :model="classForm"
              label-width="100px"
            >
              <el-form-item prop="classId" label="班级编号">
                <el-input
                  :disabled="true"
                  v-model="classForm.classId"
                  class="form-input"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item prop="className" label="班级名称">
                <el-input v-model="classForm.className" class="form-input" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="instructorName" label="辅导员">
                <el-input v-model="classForm.instructorName" class="form-input" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                size="medium"
                type="primary"
                @click="modifyClassroom('modifyClassroomRef')"
              >确 定</el-button>
              <el-button size="medium" @click="modifiedClassroomDialog = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "ManagerList",
  data() {
    return {
      classesList: [], //总记录数
      currentPage: 1, //当前页
      limit: 5, //每页显示多少条
      total: 100, //总条数
      key: "",
      addDialogVisible: false,
      modifiedClassroomDialog: false,
      rules: {
        className: [
          { required: true, message: "班级名不能为空", trigger: "blur" }
        ],
        instructorName: [
          { required: true, message: "导师名不能为空", trigger: "blur" }
        ],
        type: [{ required: true, message: "教室类型不能为空", trigger: "blur" }]
      },
      classForm: {},
      status: true,
      buildingOptions: [
        {
          value: "A",
          label: "教学楼A"
        },
        {
          value: "B",
          label: "教学楼B"
        },
        {
          value: "C",
          label: "教学楼C"
        },
        {
          value: "D",
          label: "教学楼D"
        }
      ]
    };
  },
  watch: {
    status(newVal, oldVal) {
      // console.log(newVal + ":" + oldVal);
    }
  },
  methods: {
    filterTag(value, row) {
      return row.type === value.toString();
    },
    getClassList() {
      this.$http
        .get("/class/noAuthorize/condition", {
          params: {
            page: this.currentPage,
            limit: this.limit,
            key: this.key
          }
        })
        .then(resp => {
          let { code } = resp.data;
          let { pageResult } = resp.data.data;
          if (code === 1) {
            this.classesList = pageResult.list;
            this.currentPage = pageResult.currPage;
            this.limit = pageResult.pageSize;
            this.total = pageResult.totalCount;
            return;
          }
          return this.$message.info(msg);
        })
        .catch(resp => {});
    },
    refreshTable() {
      this.reload();
      this.$message.success("已刷新");
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getClassList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getClassList();
    },
    searchClassByName() {
      this.getClassList();
    },
    resetSearchParam() {
      this.searchParam = {};
    },
    handleEdit(index, row) {
      this.$http
        .get("/class/noAuthorize/classId/" + row.classId)
        .then(resp => {
          let { code, msg } = resp.data;
          let { classes } = resp.data.data;
          if (code === 1) {
            this.classForm = classes;
            return;
          }
          this.$message.warning(msg);
        })
        .catch(resp => {});
      this.modifiedClassroomDialog = true;
    },
    closeDialog() {
      this.getClassList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(resp => {
          this.getClassList();
          this.addDialogVisible = false;
          this.modifiedClassroomDialog = false;
          done();
        })
        .catch(resp => {
          this.getClassList();
        });
    },
    openAddDialog() {
      this.classForm = {};
      this.addDialogVisible = true;
    },
    addNewClassroom(addClassroomRef) {
      this.$refs.addClassroomRef.validate(valid => {
        if (valid) {
          this.$http
            .post("/class/save", this.classForm)
            .then(resp => {
              let { code, msg } = resp.data;
              if (code === 1) {
                this.$message.success(msg);
              } else {
                this.$message.warning(msg);
              }
              this.getClassList();
              this.addDialogVisible = false;
            })
            .catch(resp => {
              console.log(resp);
            });
        }
      });
    },
    modifyClassroom(modifyClassroomRef) {
      this.$refs.modifyClassroomRef.validate(valid => {
        this.$http
          .put("/class/entity/", this.classForm)
          .then(resp => {
            let { code, msg } = resp.data;
            if (code == 1) {
              this.$message.success(msg);
            } else {
              this.$message.info(msg);
            }

            this.getClassList();
            this.modifiedClassroomDialog = false;
          })
          .catch(resp => {});
      });
    },
    confirmDelete(row) {
      this.$http
        .delete("/class/id/" + row.classId)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code === 1) {
            this.$message({
              showClose: true,
              message: msg,
              type: "success"
            });
            this.getClassList();
          } else {
            return this.$message({
              showClose: true,
              message: msg,
              type: "warning"
            });
          }
        })
        .catch(resp => {
          console.log(resp);
        });
    }
  },
  created() {
    this.getClassList();
  }
};
</script>

<style scoped>
.el-input {
  width: 158px;
  margin-right: 10px;
}

.el-row {
  margin-top: 10px;
  margin-bottom: 10px;
}
.refresh {
  float: right;
  margin-right: 20px;
}
.el-pagination {
  margin-top: 10px;
}
.form-input {
  width: 200px;
}

.el-card {
  margin-top: 20px;
}
.el-breadcrumb {
  margin-top: 10px;
}

.edit {
  margin: center;
}
.classroomSelectAdd,
.classroomSelectModify {
  width: 200px;
}
.selectBuilding {
  width: 200px;
}
.list {
  margin-top: 25px;
  margin-left: 20px;
}
</style>